<template>
	<view>
		<u-navbar
			title="新建事务"
			leftText="取消"
			@leftClick="leftClick"
			:autoBack="false"
			:placeholder="true"
			leftIcon="">
			<button class="nav-right" slot="right" @click="beforeAddWorkGroup">完成</button>
		</u-navbar>
		<view class="pic-container">
			<view class="pic-container-head">
				已选头像
			</view>
			<view class="pic-box">
				<view class="pic-current">
					<image :src="static_avator + '/static/photo/default_group_photo/bg'+photoIndex+'/90.jpg'" mode=""></image>
				</view>
				<scroll-view class="pic-select-box" :scroll-x="true">
					<image :src="static_avator + '/static/photo/default_group_photo/bg'+index+'/90.jpg'" mode="" v-for="(item,index) in 11" @click="selectImg(index)"></image>
				</scroll-view>
			</view>
		</view>
		
		<u-gap height="10" bgColor="#F3F4F6"></u-gap>
		<view class="title-box">
			<u--textarea v-model="title" height="23" placeholder="添加事务标题" maxlength="20"></u--textarea>
		</view>
		<u-gap height="10" bgColor="#F3F4F6"></u-gap>
		<view class="list-box">
			<view class="list">
				<view class="list-center" hover-class="clickable" style="position: relative;width: 50%;text-align: center;border-right: 1rpx solid #eee;height: 100rpx;line-height: 100rpx;" @click="goDevice(0)">
					维修设备
					<view class="list-center-badge">
						 <u-badge type="success" max="99" :value="fixdeviceList.length"></u-badge>
					</view>
				</view>
				<view class="list-center"  hover-class="clickable" style="width: 50%;text-align: center;height: 100rpx;line-height: 100rpx;position: relative;" @click="goDevice(1)">
					保养设备
					<view class="list-center-badge">
						 <u-badge type="success" max="99" :value="keepdeviceList.length"></u-badge>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="10" bgColor="#F3F4F6"></u-gap>
		<view class="list-box">
			<view class="list" hover-class="clickable" @click="templateVisible = true">
				<u-icon class="list-icon" name="bag"  size="20"></u-icon>
				<view class="list-center">{{template}}</view>
				<view class="list-center"></view>
			</view>
		</view>
		<u-gap height="10" bgColor="#F3F4F6"></u-gap>
		<view class="list-box">
			<view class="list" hover-class="clickable" @click="goSelectView">
				<u-icon class="list-icon" name="man-add"  size="20"></u-icon>
				<view class="list-center" v-if="selectName.length == 0">添加参与人</view>
				<view class="list-center" v-else>已添加({{selectName.length}})人</view>
				<u-icon class="list-icon" name="arrow-right"></u-icon>
			</view>
		</view>
		<u-gap height="10" bgColor="#F3F4F6"></u-gap>
		<view class="">
			<view class="select-popup-item" v-for="(v,i) in selectName" style="display: flex;">
				<view class="collapse-item__content--avator" v-if="v.avator">
					<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
				</view>
				<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
				<view class="collapse-item__content--des">
					<view class="collapse-item__content--name">{{v.pname}}</view>
					<view class="collapse-item__content--dept">{{v.dept}}</view>
				</view>
				<view class="content__role" v-if="v.role">
					({{v.role}})
				</view>
				<view class="role-btn">
					<u-button type="primary" text="删除" :customStyle="{height: '50rpx',width: '80rpx',fontSize: '25rpx'}" color="#dd6161" @click="delRole(v)" v-if="i != 0"></u-button>
					<view class="" style="width: 100rpx;" v-else></view>
					<u-button type="primary" text="角色" :customStyle="{height: '50rpx',width: '80rpx',fontSize: '25rpx'}" color="#3C9CFF" @click="changeRole(i)"></u-button>
				</view>
			</view>
		</view>
		
		<!-- <u-action-sheet class="custom-action-sheet" :actions="templates" :show="templateVisible" closeOnClickOverlay @select="templateSelct" @close="templateVisible = false"></u-action-sheet> -->
		<u-popup :show="templateVisible" :round="10" mode="bottom" @close="templateVisible = false" @open="templateVisible = true">
			<view class="template-pop">
				<view class="template-pop__head">
					<view class="" @click="templateId = 0">
						<text>公共模板</text>
						<text>({{commonTemplateNum}})</text>
					</view>
					<view class="" @click="templateId = 1">
						<text>个人模板</text>
						<text>({{personTemplateNum}})</text>
					</view>
				</view>
				<view class="template-pop__body">
					<view class="template-pop__body--item" v-for="item in templatesData" @click="templateSelct(item)">{{item.name}}</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="roleVisible" :round="10" mode="bottom" @close="roleVisible = false" @open="roleVisible = true">
			<view class="role__head">
				<view class="role__head--left" style="color: #aaa;" @click="cancelRoleVal">取消</view>
				<view class="role__head--right" @click="confirmRoleVal">确认</view>
			</view>
			<view class="role-input">
				<u--input
				    placeholder="角色名"
				    border="bottom"
					v-model="roleVal"
				    clearable
				  ></u--input>
			</view>
			<view class="role-item" hover-class="clickable" v-for="item in roles" @click="selectRole(item)">{{item.nameA}}</view>
		</u-popup>
		<u-popup :show="showTemplateTitle" mode="center" @close="showTemplateTitle = false" @open="showTemplateTitle = true">
			<view class="template-title-input">
				<u--input
				    placeholder="模板名称"
				    border="bottom"
					v-model="templateTitle"
				    clearable
					maxlength="10"
				  ></u--input>
			</view>
			<u-button type="primary" text="确认" :customStyle="{height: '50rpx',fontSize: '25rpx'}" color="#3C9CFF" @click="confirmTemplate"></u-button>
		</u-popup>
	</view>
</template>

<script>
	import _custom from '../../../common/_custom'
	import _data from '../../../common/_data'
	import _mixins from '../../../common/_mixins';
	import moment from 'moment'
	
	export default {
		data() {
			return {
				title: '',
				template: '选择模板',
				templates: [],
				templateVisible: false,
				templateId: 0,
				selectName: [],
				user: _data.data('user_info'),
				roleVisible: false,
				roleVal: '',
				roles: [],
				fixdeviceList: [],
				keepdeviceList: [],
				photoIndex: 0,
				static_avator: _data.data('static_url'),
				showTemplateTitle: false,
				templateTitle: '',
				obsusername: _data.localData('name'),
				obscode: _data.localData('obscode')
			}
		},
		onLoad() {
			this.getTeamWorkCategory()
			this.getDicBSList()
			uni.$on('select-fix-device',v => {
				this.fixdeviceList = v
			})
			uni.$on('select-keep-device',v => {
				this.keepdeviceList = v
			})
		},
		onUnload() {
			_data.localData('select-list',[])
			uni.$off('select-fix-device')
			uni.$off('select-keep-device')
		},
		onShow() {
			this.selectName = _data.localData('select-list').length ? _data.localData('select-list') : [];
			this.selectName.forEach(item => {
				item.role = '知释人';
			})
			let r = this.selectName.find(item => item.pname == this.user.nickname)
			if(!r){
				this.selectName.unshift({
					pname: this.user.nickname,
					avator: _data.staticPhoto() + this.user.photo,
					shouji: this.user.username,
					role: '知释人',
					pxid: this.user.id
				})
				_data.localData('select-list',this.selectName)
			}
			this.setTitle();
		},
		computed: {
			templatesData() {
				return this.templates.filter(v => {
					if(this.templateId == 0) {
						return v.pid != 0
					} else {
						return v.pid == 0
					}
				})
			},
			commonTemplateNum() {
				let i = 0;
				this.templates.forEach(v => {
					v.pid != 0 ? i++ : '';
				})
				return i
			},
			personTemplateNum() {
				let i = 0;
				this.templates.forEach(v => {
					v.pid == 0 ? i++ : '';
				})
				return i
			},
		},
		methods: {
			//获取模板数据
			getTeamWorkCategory() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getTeamWorkCategory',
					apiparam: {
						obsusername: this.obsusername,
					},
					success(res) {
						that.templates = res;
					}
				})
			},
			getDicBSList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDicBSList',
					apiparam: {
						obscode: 'SYS',
						xmcode: 'SWJS'
					},
					success(res) {
						that.roles = res
					}
				})
			},
			beforeAddWorkGroup() {
				let _this = this;
				if(!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if(this.selectName.length < 2) {
					uni.showToast({
						title: '至少需要选择两个人',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '是否添加为模板？',
					success: function (res) {
						if (res.confirm) {
							_this.showTemplateTitle = true
						} else {
							_this.addWorkGroup()
						}
					}
				});
			},
			addWorkGroup() {
				let users = [];
				let duty = {};
				let keepDevice = [];
				let fixDevice = [];
				this.selectName.forEach(item => {
					users.push(item.pxid * 1)
					duty[item.pxid] = item.role
				})
				this.keepdeviceList.forEach(item => {
					keepDevice.push(item.aname)
				})
				this.fixdeviceList.forEach(item => {
					fixDevice.push(item.aname)
				})
				let keep_device = keepDevice.join(',');
				let fix_device = fixDevice.join(',');
				let default_photo = 'bg' + this.photoIndex;
				_mixins.methods.$httpSend({
					path: '/im/work/addWorkGroup',
					data: {
						list_id: 0,
						users: JSON.stringify(users),
						duty: duty,
						group_name: this.title,
						default_photo: default_photo,
						keep_device: keep_device,
						fix_device: fix_device,
					},
					success(res) {
						uni.showToast({
							title: '创建成功!',
							icon: 'success'
						})
						_data.localData('select-list',[])
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								animationType: 'slide-out-bottom'
							})
						},500)
					},
					fail() {
						uni.showToast({
							title: '请求出错啦(●ˇ∀ˇ●)',
							icon: 'none'
						})
					}
				})
			},
			templateSelct(v) {
				let that = this;
				this.template = v.name;
				_custom.getDataJava({
					apiname: 'getTeamWorkPxid',
					apiparam: {
						categoryid: v.id
					},
					success(res) {
						res.forEach(item => {
							item.avator = that.static_avator + "/static/photo/user/" + item.pxid + "/70.jpg"
							item.role = '知释人'
						})
						let r = res.find(item => item.pname == that.user.nickname)
						if(!r){
							res.unshift({
								pname: that.user.nickname,
								avator: _data.staticPhoto() + that.user.photo,
								shouji: that.user.username,
								role: '知释人',
								pxid: that.user.id
							})
						}
						that.selectName = res
						_data.localData('select-list',that.selectName)
						that.setTitle();
						that.templateVisible = false
					}
				})
			},
			goSelectView() {
				uni.navigateTo({
					url: './select'
				})
			},
			formatName(v) {
				return v && v.length > 2 ? v.substring(v.length-2) : v
			},
			onErrorImg(v) {
				v.avator = ''
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeRole(i) {
				this.roleVisible = true;
				this.current = i;
			},
			delRole(v) {
				this.selectName = _data.localData('select-list').length ? _data.localData('select-list') : [];
				let i = this.selectName.findIndex(item => item.pxid == v.pxid)
				this.selectName.splice(i,1)
				_data.localData('select-list',this.selectName)
				this.setTitle()
			},
			confirmRoleVal() {
				this.selectName[this.current].role = this.roleVal;
				this.roleVal = '';
				this.roleVisible = false;
			},
			cancelRoleVal() {
				this.roleVal = '';
				this.roleVisible = false;
			},
			selectRole(v) {
				this.selectName[this.current].role = v.nameA;
				this.roleVal = '';
				this.roleVisible = false;
			},
			selectImg(i) {
				this.photoIndex = i;
			},
			goDevice(v) {
				if(v == 0) {
					let data = {
						type: v,
						list: this.fixdeviceList
					}
					uni.navigateTo({
						url: './device?data=' + JSON.stringify(data)
					})
				} else {
					let data = {
						type: v,
						list: this.keepdeviceList
					}
					uni.navigateTo({
						url: './device?data=' + JSON.stringify(data)
					})
				}
			},
			setTitle() {
				let time = moment().format('YYYY-MM-DD')
				// let template = this.template == '选择模板' ? '' : this.template;
				let users = [];
				this.selectName.forEach(item => {
					if(item.pname) {
						users.push(item.pname)
					}
				})
				let user = users.join(' ')
				let title = user + ' ' + time;
				if(title.length > 16) {
					title = title.substring(0,17) + '...'
				}
				this.title = title
			},
			confirmTemplate() {
				if(!this.templateTitle) {
					uni.showToast({
						title: '模板名称不能为空',
						icon: 'none'
					})
					return
				}
				let that = this;
				_custom.getDataJava({
					apiname: 'addTeamWorkTemplateName',
					code: 1,
					apiparam: {
						tplname: this.templateTitle,
						obsusername: this.obsusername
					},
					success(res) {
						let id = res[0].id;
						let params = [];
						that.selectName.forEach(item => {
							params.push({
								obscode: that.obscode,
								pid: id,
								obsusername: that.obsusername,
								pname: item.pname,
								punit: item.punit
							})
						})
						_custom.getDataJava({
							apiname: 'addTeamWorkTemplateUsers',
							code: 13,
							apiparam: params,
							success(res) {
								uni.showToast({
									title: '模板创建成功',
									icon: 'success'
								})
								that.addWorkGroup()
							},
							fail() {
								uni.showModal({
									title: '模板创建失败，是否生成群聊？',
									success: function (res) {
										if (res.confirm) {
											that.addWorkGroup()
										}
									}
								});
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.nav-right {
		height: 50rpx;
		padding: 5rpx 20rpx;
		background-color: #3C9CFF;
		color: #fff;
		font-size: 25rpx;
		line-height: 40rpx;
	}
	
	.pic-container {
		width: 100%;
		overflow: hidden;
		background-color: #fff;
	}
	
	.pic-container-head {
		font-size: 20rpx;
		color: #aaa;
		padding-left: 20rpx;
		line-height: 30rpx;
	}
	
	.pic-box {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding: 10rpx 20rpx;
		position: relative;
		padding-left: 120rpx;
	}
	
	.pic-current {
		position: absolute;
		top: 0;
		left: 0;
		width: 120rpx;
		height: 120rpx;
		line-height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 20rpx;
		z-index: 999;
		border-right: 1rpx solid #eee;
	}
	
	.pic-select-box {
		width: calc(100% - 140rpx);
		margin-left: 30rpx;
		white-space: nowrap;
	}
	
	.pic-box image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	
	.list-box {
		background-color: #fff;
	}
	
	.list {
		display: flex;
		height: 100rpx;
		align-items: center;
	}
	
	.list-icon {
		width: 10%;
		display: flex;
		justify-content: center;
	}
	
	.list-center {
		width: 80%;
		font-size: 30rpx;
		color: #aaa;
	}
	
	.select-popup-item {
		background-color: #fff;
		padding: 10rpx 20rpx;
		position: relative;
	}
	
	.collapse-item__content--avator {
		font-size: 27rpx;
		width: 70rpx;
		height: 70rpx;
		background-color: #3C9CFF;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
	
	.collapse-item__content--avator > image {
		width: 100%;
		height: 100%;
	}
	
	.collapse-item__content--des {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.collapse-item__content--name {
		font-size: 30rpx;
		color: #000;
		line-height: 40rpx;
	}
	
	.collapse-item__content--dept {
		font-size: 25rpx;
		line-height: 25rpx;
	}
	
	.content__role {
		margin-left: 20rpx;
		line-height: 40rpx;
	}
	
	.role__head {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.role-btn {
		position: absolute;
		right: 10rpx;
		top: 20rpx;
		width: 200rpx;
		display: flex;
	}
	
	.role-input {
		height: 120rpx;
		display: flex;
		align-items: center;
	}
	
	.role-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-top: 1rpx solid #eee;
	}
	
	.device-box {
		display: flex;
		justify-content: space-between;
	}
	
	.device-box > view {
		width: 50%;
	}
	
	.device-box-item {
		height: 80rpx;
		padding: 20rpx;
		font-size: 25rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		color: #999;
		text-align: center;
	}
	
	.list-center-badge {
		position: absolute;
		top: 20rpx;
		right: 90rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.custom-action-sheet /deep/ .u-popup__content {
		max-height: 600rpx;
		overflow-y: scroll;
	}
	
	.template-title-input {
		width: 600rpx;
	}
</style>
<style lang="scss" scoped>
	.template-pop {
		height: 90vh;
		background-color: #fff;
		
		&__head {
			display: flex;
			height: 100rpx;
			align-items: center;
			
			view {
				flex: 1;
				height: 100rpx;
				background-color: #eee;
				text-align: center;
				line-height: 100rpx;
				
				&:first-child {
					border-right: 1rpx solid #fff;
				}
				
				&:active {
					background-color: #ddd;
				}
			}
		}
		
		&__body {
			height: calc(100% - 100rpx);
			overflow-y: scroll;
			
			&--item {
				height: 100rpx;
				padding-left: 20rpx;
				font-size: 30rpx;
				line-height: 100rpx;
				border-bottom: 1rpx solid #eee;
				
				&:active {
					background-color: #eee;
				}
			}
		}
	}
</style>
